<script setup>
import { useCounterStore } from "../../pain/login/login";
import { storeToRefs } from "pinia";
const store = useCounterStore();
const active = ref(20);
const active1 = ref(0);
const active2 = ref(0);
const listss = reactive([]);
const Notice = ref("");
const member = ref("1");
const vipLevel = ref(); //会员级别
const tabName = ref("六度·标准版"); //默认六度·标准版
const collects = ref("false"); //是否收藏
const centerDialogVisible = ref(false);
const centerDialogVisible1 = ref(false);
const { isShowDrawer } = storeToRefs(store);
const project_progress = ref();
// const element = ref()
import { ref, reactive, onMounted, onUnmounted } from "vue";
import { timestamp, timestamp1, type_status, diqu } from "@/utils/index";
import { getCaricatureApi } from "@/Api/shoop/index.js";
import domData from "@/utils/json/dom.json";
import { ElMessage, ElMessageBox } from "element-plus";
import { money } from "@/utils/index.js";
import Fot from "../../components/fotter/index.vue";
import printJS from "print-js";
import {
  memberPrice,
  exportPost,
  collect,
  cancelFavorite,
  bookmark,
  newProcessing,
  processingList,
  Bxsubscription,
  edit,
  detail,
  memberPrices,
  contact_img,
} from "../../Api/complete/index.js";
// import { searchDetails } from "../../Api/searchInfo/searchInfo.js";
import { useRouter } from "vue-router";
import axios from "axios";
import { useWindowScroll } from "@vueuse/core";
// import { timestamp, diqu } from "@/utils/index";
// import type { FormInstance, FormRules } from 'element-plus';

const ruleForm = reactive({
  note: "",
});
const rules = reactive({
  type: [
    {
      type: "array",
      required: true,
      message: "请选择处理状态",
      trigger: "change",
    },
  ],
});
const qxVip = () => {
  centerDialogVisible1.value = false;
};
window.scrollTo({
  top: 560,
  left: 0,
  behavior: "smooth",
});
const kfimg = ref("");
contact_img().then((res) => {
  if (res.data.code == 1) {
    // console.log(res.data);
    kfimg.value = "http://api.6ocbx.com/" + res.data.data.img;
  } else {
    ElMessage.error(res.data.msg);
  }
});
//项目进度跳转详情
const Jumpaa = (event) => {
  console.log(event.nid);
  if (!tokens) {
    store.uselogin = true;
  } else {
    const href = router.resolve({
      path: `/searchInfo/${event.nid}`,
    });
    window.open(href.href, "_blank");
  }
};
const router = useRouter();
const route = useRouter();
const id = route.currentRoute.value.params.id;
import { decrypt } from "@/utils/index";
const tokens = localStorage.getItem("token");

let ids = reactive({});
if (!tokens) {
  // router.push("/");
} else {
  ids = JSON.parse(decrypt(tokens));
}
// const ids = JSON.parse(localStorage.getItem("token"));

// console.log(ids, "yyy");

if (tokens) {
  const id_s = ref(0);
  const clientid = ref(0);
  id_s.value = ids.level_id;
  vipLevel.value = ids.level_id;
  clientid.value = ids.clientid;
  // console.log(id_s.value);
} else {
  store.uselogin = true;
}
// import { onMounted, onUnmounted, reactive } from 'vue'
const data = reactive({
  oldScrollTop: 0,
});
// const scrolling = () => {
//   // 滚动条距文档顶部的距离
//   let scrollTop =
//     window.pageYOffset ||
//     document.documentElement.scrollTop ||
//     document.body.scrollTop;
//   // 滚动条滚动的距离
//   let scrollStep = scrollTop - data.oldScrollTop;
//   console.log("header 滚动距离 ", scrollTop);
//   // 更新——滚动前，滚动条距文档顶部的距离
//   data.oldScrollTop = scrollTop;

//   //变量windowHeight是可视区的高度
//   let windowHeight =
//     document.documentElement.clientHeight || document.body.clientHeight;
//   //变量scrollHeight是滚动条的总高度
//   let scrollHeight =
//     document.documentElement.scrollHeight || document.body.scrollHeight;

//   //滚动条到底部的条件
//   if (scrollTop + windowHeight == scrollHeight) {
//     //你想做的事情
//     console.log("header  你已经到底部了");
//   }
//   if (scrollStep < 0) {
//     console.log("header 滚动条向上滚动了！");
//   } else {
//     console.log("header  滚动条向下滚动了！");
//   }
//   // 判断是否到了最顶部
//   if (scrollTop <= 0) {
//     console.log("header 到了最顶部");
//   }
// };

// onMounted(() => {
//   window.addEventListener("scroll", scrolling);
// });
// onUnmounted(() => {
//   window.removeEventListener("scroll", scrolling);
// });

// const aaaaa = () =>{
//   window.scrollTo({ top: document.getElementById(progress).offsetTop });
// }
const imgList = reactive([
  { url: new URL(`../../assets/img/3.png`, import.meta.url).href, id: 2 },
  { url: new URL(`../../assets/img/2.png`, import.meta.url).href, id: 3 },
  {
    url: new URL(`../../assets/img/蒙版组 4@2x.png`, import.meta.url).href,
    id: 4,
  },
  {
    url: new URL(`../../assets/img/蒙版组 5@2x.png`, import.meta.url).href,
    id: 5,
  },
  {
    url: new URL(`../../assets/img/蒙版组 6@2x.png`, import.meta.url).href,
    id: 6,
  },
]);
// const gaoji1 = ref()
// const Vip1 = ref()
const putong1 = ref();
// const gaoji2 = ref()
// const Vip2 = ref()
const putong2 = ref();

//标准版缩小显示的价格
const putong = () => {
  const from1 = reactive({
    level_id: memberId.value,
  });
  memberPrices(from1).then((res) => {
    putong1.value = Math.floor(res.data.data[1].price);
    putong2.value = Math.floor(res.data.data[0].price);
  });
};
// const putong =() =>{
const from1 = reactive({
  level_id: 2,
});
memberPrices(from1).then((res) => {
  putong1.value = Math.floor(res.data.data[1].price);
  putong2.value = Math.floor(res.data.data[0].price);
});
// };
// gaoji()
// VIP()
// putong()

//请求处理列表
const type_id = ref();
const note = ref();
const typeList = reactive([
  { type_id: 1, title: "联系中" },
  { type_id: 2, title: "已投标" },
  { type_id: 3, title: "已合作" },
  { type_id: 4, title: "放弃" },
  { type_id: 5, title: "不相关" },
  { type_id: 6, title: "已中标" },
  { type_id: 7, title: "未中标" },
]);
const typeList1 = reactive({});
// const processingList1 = () => {
//   const form5 = reactive({
//     nid: id,
//     clientid: ids.clientid,
//     // type_id: 2
//   });
//   processingList(form5).then((res) => {
//     if (res.data.code == 1) {
//       typeList1.value = res.data.data;
//     } else {
//       ElMessage.error(res.data.msg);
//     }
//   });
// };
if (!tokens) {
  console.log("55");
} else {
  // processingList1();
  // if (vipLevel.value==1) {
  //     centerDialogVisible1.value = true
  //   }else{
  // processingList1();
  //   }
  // sfcollects();
}

//新建处理
const status_1 = ref();
const status = ref();
const modifyId = ref();
const dialogTit = ref("新建处理");
const xjcl = () => {
  if (!token) {
    store.uselogin = true;
  } else {
    if (vipLevel.value == 1) {
      centerDialogVisible1.value = true;
    } else {
      status_1.value = 1;
      centerDialogVisible.value = true;
      active2.value = "";
      ruleForm.note = "";
    }
  }
};
// const modify = (event) => {
//   dialogTit.value = "修改处理";
//   modifyId.value = event.id;
//   status_1.value = 0;
//   console.log(event);
//   centerDialogVisible.value = true;
//   // active2.value=event.type_status
//   ruleForm.note = event.note;
//   typeList.forEach((element) => {
//     // console.log(element);
//     if (element.type_id == event.type_status) {
//       status.value = element.title;
//     }
//   });
// };

//修改确定
// const qued1 = () => {
//   centerDialogVisible.value = false;
//   // console.log(ruleForm);
//   // ruleForm.
//   const form = reactive({
//     id: modifyId,
//     note: ruleForm.note,
//   });
//   edit(form).then((res) => {
//     if (res.data.code == 1) {
//       // console.log(res.data);
//       processingList1();
//       // typeList1.value = res.data.data
//     } else {
//       ElMessage.error(res.data.msg);
//     }
//   });
// };
// 新增确定
// const qued = () => {
//   centerDialogVisible.value = false;
//   // console.log(ruleForm);
//   // ruleForm.
//   const form = reactive({
//     nid: id,
//     clientid: ids.clientid,
//     type_id: active2.value,
//     note: ruleForm.note,
//   });
//   newProcessing(form).then((res) => {
//     if (res.data.code == 1) {
//       // console.log(res.data);
//       processingList1();
//       // typeList1.value = res.data.data
//     } else {
//       ElMessage.error(res.data.msg);
//     }
//   });
// };
// const scrollToAnchor = () =>{
const getClass = (item) => {
  const index = project_progress.value.indexOf(item); // 获取当前项在数组中的索引位置
  console.log(project_progress.value.length - 1, index);
  if (project_progress.value.length - 1 == index) {
    return `lastOne`;
  } else {
    // if (project_progress.value.length-1==index) {
    return `imgss`;
    // }
  }

  // if (index==project_progress.value.length-1) {
  //   return `lastOne`
  // }
};
// }
//判断是否收藏
// const sfcollects = () => {
//   console.log(id);
//   const form4 = reactive({
//     nid: id,
//     clientid: ids.clientid,
//   });
//   // console.log(form4);
//   bookmark(form4).then((res) => {
//     if (res.data.code == "1") {
//       if (res.data.data.is_coll == "1") {
//         collects.value = "true";
//       } else if (res.data.data.is_coll == "2") {
//         collects.value = "false";
//       }
//     } else {
//       ElMessage.error(res.data.msg);
//     }
//     // console.log(collects.value);
//   });
// };
// if (!token) {
//   console.log("55");
// } else {
// sfcollects();
// if (vipLevel.value==1) {
//     centerDialogVisible1.value = true
//   }else{
// // processingList1();
// sfcollects();
//   }
// }
//收藏
// const collectJump = () => {
//   if (!token) {
//     store.uselogin = true;
//   } else {
//     if (vipLevel.value == 1) {
//       centerDialogVisible1.value = true
//     } else {
//       const form = reactive({
//         nid: id,
//         clientid: ids.clientid,
//       });
//       collect(form).then((res) => {
//         if (res.data.code == 1) {
//           collects.value = "true";
//           ElMessage.success(res.data.msg);
//           sfcollects();
//         } else {
//           ElMessage.error(res.data.msg);
//         }
//       });
//     }
//   }
// };
//取消收藏
// const FavoriteJump = () => {
//   if (!token) {
//     store.uselogin = true;
//   } else {
//     if (vipLevel.value == 1) {
//       centerDialogVisible1.value = true
//     } else {
//       const form = reactive({
//         nid: id,
//         clientid: ids.clientid,
//       });
//       cancelFavorite(form).then((res) => {
//         if (res.data.code == 1) {
//           collects.value = "false";
//           ElMessage.success(res.data.msg);
//           sfcollects();
//         } else {
//           ElMessage.error(res.data.msg);
//         }
//       });
//     }
//   }
// };

const memberList = reactive([
  {
    id: 2,
    name: "六度·标准版",
    notes: "",
    weigh: 2,
    is_del: 0,
    createtime: 1702362539,
    updatetime: 1702362539,
  },
  {
    id: 3,
    name: "六度·高级版",
    notes: "",
    weigh: 3,
    is_del: 0,
    createtime: 1702363173,
    updatetime: 1702363173,
  },
  {
    id: 4,
    name: "六度·定制版",
    notes: "",
    weigh: 4,
    is_del: 0,
    createtime: 1702363187,
    updatetime: 1702363187,
  },
  {
    id: 5,
    name: "六度·VIP",
    notes: "",
    weigh: 5,
    is_del: 0,
    createtime: 1702363207,
    updatetime: 1705662382,
  },
]);
memberList.forEach((item) => {
  item.url = 0;
  imgList.forEach((element) => {
    if (item.id == element.id) {
      item.url = element.url;
    }
  });
});
// postMember().then((res) => {
//   if (res.data.code == 1) {
//     memberList.value = res.data.data;
//     memberList.value.forEach((item) => {
//       item.url = 0;
//       imgList.forEach((element) => {
//         if (item.id == element.id) {
//           item.url = element.url;
//         }
//       });
//     });
//   } else {
//     ElMessage.error(res.data.msg);
//   }
// });
const form = reactive({
  level_id: 2,
});
const a1 = ref();
const a2 = ref();
const a3 = ref();
const a4 = ref();
const a5 = ref();
const a6 = ref();
const a7 = ref();
const a8 = ref();
const a9 = ref();
const a10 = ref();
const a11 = ref();
const city = ref();
const info_url = ref();
// domData.forEach

// const a7 = ref()
const searchInfo = () => {
  var a = null;
  if (ids) {
    a = ids.level_id;
  } else {
    a = "-1";
  }
  // const form = ref({
  //   nid: id,
  //   level_id: a,
  // });
  // detail(form.value).then((res) => {
  //   if (res.data.data.list.length !== 0) {
  //     info_url.value = res.data.data.info_url;
  //     listss.value = res.data.data.list;
  //     a1.value = res.data.data.list[0].xmdw;
  //     a2.value = res.data.data.list[0].xmlx;
  //     a3.value = res.data.data.list[0].xmdh;

  //     a4.value = res.data.data.list[0].dldw;
  //     a5.value = res.data.data.list[0].dllx;
  //     a6.value = res.data.data.list[0].dldh;

  //     // a7.value = res.data.data.list[0].zbdw;
  //     // console.log(typeof res.data.data.list[0].zbdw)
  //     var a = typeof res.data.data.list[0].zbdw
  //     console.log(a);
  //     if (a == 'string') {
  //       a7.value = res.data.data.list[0].zbdw;
  //     } else {
  //       if (res.data.data.list[0].zbdw == null) {
  //         a7.value = res.data.data.list[0].zbdw;
  //       } else {
  //         a7.value = res.data.data.list[0].zbdw[0]
  //       }
  //     }
  //     a8.value = res.data.data.list[0].zblx;
  //     a9.value = res.data.data.list[0].zbdh;
  //     a10.value = res.data.data.list[0].infoid;

  //     a11.value = res.data.data.list[0].provinceid;
  //     project_progress.value = res.data.data.project_progress;
  //     // if (res.data.data.project_progress) {
  //     //   if (res.data.data.project_progress.length <= 1) {
  //     //   project_progress.value = [];
  //     // } else {
  //     //   project_progress.value = res.data.data.project_progress;
  //     // }
  //     // }
  //   } else {
  //     list.value = res.data.data.list;
  //     // console.log(list.value);
  //   }
  //   if (res.data.code == 1) {
  //     Notice.value = res.data.data.content;
  //   }
  //   domData.forEach((element) => {
  //     if (element.adcode == a11.value) {
  //       // console.log(element);
  //       // console.log(element);
  //       city.value = element.label;
  //       // item.url = element.url;
  //     }
  //   });
  // });
};

//

// infoid转码
const ggao = ref();
const information = ref([]);
getCaricatureApi().then((res) => {
  information.value = res.data.data;
  // res.data.data.forEach((item, index) => {
  //   console.log(a10.value, "11111111");
  //   if (item.infoid === a10.value) {
  //     ggao.value = item.infoname;
  //   }
  //   // console.log(item.infoid);
  // });
});
const infoids = (event) => {
  console.log(event);
  var a = null;
  information.value.forEach((element) => {
    if (element.infoid == event) {
      a = element.infoname;
    }
  });
  return a;
};

//跳转会员支付页面
const Jumpvip = () => {
  if (!tokens) {
    store.uselogin = true;
  } else {
    const href = router.resolve({
      path: "/memberPayment",
    });
    window.open(href.href, "_blank");
  }
  // router.push({
  //   path: "/memberPayment",
  // });
};
searchInfo();
const handleClick = (event) => {
  memberId.value = event.id;
  tabName.value = event.name;
  putong();
  // console.log(event.name, tabName.value);
};
// const handleClick1 = (event) =>{
//   console.log("event");
// }
// 会员购买对应的价格
const price = reactive([]); //会员价格
const postMemberPrice = () => {
  const form = reactive({
    level_id: memberId.value,
  });
  memberPrice(form).then((res) => {
    if (res.data.code == 1) {
      price.value = res.data.data;
    } else {
      ElMessage.error(res.data.msg);
    }
  });
};
//接受参数

// route.params.id
const form1 = reactive({
  level_id: 2,
});
memberPrice(form1).then((res) => {
  if (res.data.code == 1) {
    price.value = res.data.data;
  } else {
    ElMessage.error(res.data.msg);
  }
});
const memberId = ref(0);
const changeStatus = (number) => {
  // active.value = number.id;
  active.value = number;
};
const changeStatus1 = (number) => {
  active1.value = number;
};

// onMounted(() => {
//   const token = localStorage.getItem("token");
//   const ids = JSON.parse(localStorage.getItem("token"));
//   const id_s = ids.level_id;
//   console.log(id_s);
// });

const activeName = ref("1");
const scrollbar = ref(null);
const showBackToTop = ref(false);
// const handleScroll = () => {
//   const distance = scrollbar.value.$refs.wrapRef.scrollTop;
//   if (0 < distance && distance < 400) {
//     activeName.value = "1";
//   } else if (400 < distance && distance < 700) {
//     activeName.value = "2";
//   } else if (700 < distance) {
//     activeName.value = "3";
//   }
// };
// import { useCounterVip } from "@/pain/vip/index.js";
// const useVip = useCounterVip();
// const maskClick = () => {
//   useVip.maskShow = false;
// };
</script>

<template>
  <!--  v-show="useVip.maskShow" -->
  <div class="box_vips">
    <div class="container" id="aaa">
      <div class="mask">
        <!-- <span class="maskX" @click="maskClick">X</span> -->
        <div class="membership searchInfo-1">
          <div class="bgimg"></div>
          <div class="bgbuttom">
            <div class="membership-top">开通会员套餐，获取更多商机</div>
            <el-tabs
              v-model="tabName"
              type="card"
              class="demo-tabs"
              @tab-click="handleClick1"
            >
              <el-tab-pane
                v-for="item in memberList"
                :label="item.name"
                :name="item.name"
              >
                <template #label>
                  <span class="custom-tabs-label" @click="handleClick(item)">
                    <div class="hy">
                      <img :src="item.url" alt="" />
                    </div>
                    <span>{{ item.name }}</span>
                  </span>
                </template>
                <div class="Recharge" v-if="memberId !== 5">
                  <div class="radio">
                    <div class="radio-span">
                      <div
                        class="qian"
                        :class="{ checked: active === 20 }"
                        style="margin-right: 20px"
                        @click="changeStatus(20)"
                      >
                        <div class="qian-s">
                          <div class="qian-1">¥</div>
                          <div class="qian-2">{{ putong2 }}</div>
                          <div class="qian-3">/省/年</div>
                        </div>
                        <!-- <div class="qian-ss">加订¥100/省</div> -->
                        <div class="Selected" id="myElement">
                          <img src="../../assets/img/组 4921@2x.png" alt="" />
                        </div>
                      </div>
                      <div
                        class="qian"
                        :class="{ checked: active === 30 }"
                        @click="changeStatus(30)"
                      >
                        <div class="qian-s">
                          <div class="qian-1" style="margin-left: -10px">¥</div>
                          <div class="qian-2">{{ putong1 }}</div>
                          <div class="qian-3">/全国/年</div>
                        </div>
                        <div class="Selected" id="myElement">
                          <img src="../../assets/img/组 4921@2x.png" alt="" />
                        </div>
                      </div>
                    </div>
                    <div class="radio-content">
                      <div class="prompt">
                        <div class="prompt-1">
                          1.开通前请阅读
                          <div class="agreement">《服务协议》</div>
                        </div>
                        <div class="prompt-1">
                          2.请在支付完成后按提示提交开票资料
                        </div>
                      </div>
                      <div class="purchase" @click="Jumpvip()">前往购买</div>
                    </div>
                  </div>
                </div>
                <div class="Recharge" v-else style="height: 304px">
                  <div class="radio">
                    <div class="radio">
                      <div class="kfimg">
                        <img :src="kfimg" alt="" />
                      </div>
                      <div class="kf-2">联系专属客服</div>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
img {
  width: 100%;
  height: 100%;
}

.maskX {
  position: absolute;
  top: 15px;
  right: 25px;
}

.box_vips {
  //   position: fixed;
  //   top: 0;
  //   left: 0;
  width: 500px;
  height: 500px;
  // background-color: #f6f6f6;
  //   justify-content: center;
  //   z-index: 9999;

  .details {
    width: 1200px;
    // height: 152px;
    background-color: #fff;
    margin: 10px auto;
  }

  .details-top {
    // width: 100%;
    width: 1200px;
    height: 56px;
    border-bottom: 1px solid #eee;
    line-height: 56px;
    padding-left: 40px;
    display: flex;
    justify-content: space-between;
    position: relative;
  }

  .ioc {
    width: 14px;
    height: 16px;
  }

  .titlesss {
    // width: 100px;
    height: 16px;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 20px;
    color: #333333;
    opacity: 1;
    line-height: 50px;
    // padding-left: 6px;
    position: absolute;
    left: 60px;
    top: 4px;
  }

  .daochu {
    // width: 250px;
    height: 16px;
    line-height: 50px;
    display: flex;
    justify-content: space-between;
    padding-right: 40px;
    // margin-right: 10px;
    // margin-right: 20px;
    box-sizing: border-box;
  }

  .dc-ioc {
    // width: 33%;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    display: flex;
    color: #333333;
    padding-left: 20px;

    img {
      width: 14px;
      height: 14px;
      margin-right: 6px;
      margin-top: 18px;
    }
  }

  .details-conten {
    width: 100%;
    padding: 20px 40px;
    // height: 95px;
  }

  .details-a {
    height: 24px;
    width: 100%;
    // padding-left: 40px;
    display: flex;
    // margin-top: 18px;
    // margin-bottom: 30px;
  }

  .details-tb {
    width: 80px;
    height: 24px;
    border-radius: 4px;
    background: #6675ff;
    // margin-top: 17px;
    text-align: center;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 24px;
    color: #ffffff;
    margin-right: 10px;
  }

  .details-js {
    height: 20px;
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    line-height: 24px;
    color: #333333;
    opacity: 1;
    // margin:0 0 20px 0;
    // margin-top: 18px;
  }

  .details-b {
    width: 100%;
    height: 14px;
    margin-top: 35px;
    // padding-left: 41px;
    display: flex;
  }

  .sj {
    width: 16px !important;
    height: 14px;
    margin-right: 4px;
    margin-top: -3px;
  }

  .sj-a {
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 14px;
    color: #a9b1be;
    opacity: 1;
  }

  .information {
    width: 1200px;
    height: 255px;
    background-color: #fff;
    margin: 10px auto;
    position: relative;
    /* 确保子元素能够正常显示 */
  }

  .information-top {
    width: 1200px;
    height: 56px;
    padding-top: 20px;
    display: flex;
    border-bottom: 1px solid #eee;
    position: relative;
  }

  .jb {
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 20px;
    color: #333333;
    opacity: 1;
    padding-left: 10px;
    margin-top: -2px;
  }

  .feedback {
    // width: 140px;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 20px;
    color: #6675ff;
    opacity: 1;
    position: absolute;
    right: 20px;
    top: 18px;
    display: flex;
  }

  .table {
    width: 1120px;
    margin: 0 auto;
    padding-top: 20px;
  }

  .table-td {
    width: 100%;
    height: 50px;
    display: flex;
  }

  .td-1 {
    width: 150px;
    height: 50px;
    background: #f5f6fa;
    border: 1px solid #eeeeee;
    opacity: 1;
    border-radius: 0px;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 50px;
    text-align: center;
  }

  .td-2 {
    width: 412px;
    height: 50px;
    background: #ffffff;
    border: 1px solid #eeeeee;
    opacity: 1;
    border-radius: 0px;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 50px;
    /* color: #6675FF;
  text-decoration: underline; */
    opacity: 1;
    text-indent: 2em;
    display: flex;

    .td-2-1 {
      width: 18px;
      height: 18px;

      margin-left: -10px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .td-2-2 {
      width: 18px;
      height: 18px;
      margin-left: 6px;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .xhx {
    text-decoration: underline;
    /* 添加下划线 */
    color: #6675ff;
    cursor: pointer;
    /* 修改文本颜色为红色 */
  }

  .detailsText {
    width: 1200px;
    height: auto;
    background-color: #fff;
    margin: 10px auto;
    position: relative;
  }

  .fwb {
    width: 1120px;
    height: 100%;
    margin: 0 auto;
    padding: 20px 0;

    // padding-bottom: -14px;
    p {
      height: auto;
    }
  }

  // .container {
  //   width: auto;
  //   height: auto;
  //   position: relative;
  //   /* 确保子元素能够正常显示 */
  // }

  .mask {
    // position: absolute;
    // top: 50%;
    // left: 50%;
    // transform: translate(-50%, -50%);
    display: block;
    width: 1200px !important;
    // height: 94%;
    background-color: rgba(246, 246, 246, 0.93);
    z-index: 9999;
    // display: none;
  }

  //开通会员页面
  .membership {
    position: relative;
    // margin-top: 70px;
    width: 1200px;
    height: 500px;
    // background: linear-gradient(
    //   180deg,
    //   #6675ff 0%,
    //   rgba(102, 117, 255, 0) 100%
    // ) !important;
    background: linear-gradient(
      180deg,
      #f43107 0%,
      rgba(255, 158, 137, 0) 100%
    );
    // margin: 70px auto;
  }

  .membership-top {
    height: 140px;
    padding-top: 25px;
    text-align: center;
    font-size: 32px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    line-height: 56px;
    color: #fbd49c;
    text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  }

  .searchInfo-1 .el-tabs__content {
    width: 100%;
    box-sizing: border-box;
    // height: 400px;
  }

  .searchInfo-1 .el-tabs--card > .el-tabs__header {
    border: none !important;
    margin-left: 40px;
  }

  .searchInfo-1 .demo-tabs {
    margin: 0 110px;
    height: 240px;
    margin-top: -30px;
  }

  .searchInfo-1 .el-tabs__header .is-top {
    height: 60px;
    line-height: 40px;
    border: none !important;
  }

  .searchInfo-1 .el-tabs__item.is-active {
    width: 225px;
    height: 60px;
    background: linear-gradient(225deg, #fbcf89 0%, #efd6a8 100%);
    opacity: 1;
    border-radius: 8px 8px 0px 0px;
    margin-top: 0;
  }

  .searchInfo-1 .el-tabs__item {
    width: 225px;
    padding: 0;
    background: linear-gradient(180deg, #515151 0%, #4c4c4c 52%, #3a3a3a 100%);
    opacity: 1;
    border-radius: 8px 8px 0px 0px;
    box-sizing: border-box;
    margin-top: 20px;
    padding-top: 0px;
  }

  #tab-second {
    padding: 0;
  }

  .searchInfo-1 .custom-tabs-label {
    display: flex;

    span {
      width: 100px;
      text-align: left;
      margin-top: -20px;
    }

    .hy {
      margin-left: 20px;
      margin-top: -20px;
      width: 20px;
      height: 20px;

      img {
        width: 20px;
        height: 20px;
      }
    }
  }

  .searchInfo-1 .is-active .custom-tabs-label {
    font-size: 22px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    line-height: 60px;
    margin-left: -55px;
    color: #6d4315;

    span {
      width: 100px;
      text-align: left;
      margin-top: 0px;
    }

    .hy {
      width: 32px;
      height: 30px;
      margin-top: -4px;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .searchInfo-1 .custom-tabs-label {
    text-align: center;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 40px;
    color: #ffffff;
  }

  .Recharge {
    width: 900px;
    padding: 30px 70px 30px 70px;
    background: #fff;
    margin-left: 40px;
    // margin-top:4px;
    // width: 980px;
    // background: #f6f6f6;
    // opacity: 1;
    // border-radius: 0px;
    // margin-left: 40px;
    // margin-top: 5px;
  }

  .radio {
    // display: flex;
    // margin-bottom: 20px;
    // justify-content: space-between;

    span {
      width: 150px;
      font-size: 30px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
    }

    .radio-span {
      display: flex;
      // justify-content:space-between;
      // margin-left: 20px;

      .title1 {
        width: 300px;
        height: 150px;
        border-radius: 8px;
        background-color: #fff;
        margin: 30px 20px 30px 0;
        padding: 0;
        position: relative;
      }

      .checked {
        color: #537cf5;
        // border: 1px solid #537cf5;
        border: 2px solid #f5d3a3;

        .Selected {
          position: absolute;
          bottom: 0;
          right: 0;
          width: 28px !important;
          height: 28px !important;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .yin {
          color: #333333;
        }

        .yin-y {
          color: #d92f2f;
        }

        .tj {
          width: 60px;
          height: 26px;
          // background: #d92f2f;
          opacity: 1;
          border-radius: 8px 0px 8px 0px;
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          line-height: 20px;
          color: #ffffff;
          opacity: 1;
          text-align: center;
        }
      }
    }
  }

  .yin {
    width: 100%;
    height: 19px;
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 0px;
    color: #acacac;
    opacity: 1;
    text-align: center;
    margin-top: 10px;
  }

  .yin-y {
    // width: 100%;
    height: 34px;

    font-family: Source Han Sans CN;
    font-weight: bold;
    line-height: 0px;
    color: #acacac;
    opacity: 1;
    margin-top: 20px;
    text-align: center;
    display: flex;

    .ms {
      // width: 100%;
      font-size: 18px;
      margin-left: 60px;
    }

    .msjia {
      font-size: 34px;
    }
  }

  .yjia {
    width: 100%;
    height: 16px;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 0px;
    color: #acacac;
    opacity: 1;
    text-align: center;
    text-decoration: line-through;
  }

  .tj {
    width: 60px;
    height: 26px;
    background: #fff;
    opacity: 1;
    border-radius: 8px 0px 8px 0px;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 20px;
    color: #ffffff;
    opacity: 1;
    text-align: center;
    // margin-top: 20px;
  }

  .Selected {
    width: 28px;
    height: 28px;
    // display: none;
    position: absolute;
    bottom: 0;
    right: 0;

    img {
      width: 0;
      height: 0;
    }
  }

  .kb {
    margin-top: 20px;
    background-color: #fff;
  }

  .paymentMethod {
    width: 940px !important;
    height: 70px;
    background: #ffffff;
    // opacity: 1;
    border-radius: 8px;
    margin-left: 20px;
    display: flex;
    z-index: 100 !important;
    margin-top: 30px;
    // padding-top: 45px;
  }

  .payment {
    width: 64px;
    height: 16px;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 0px;
    color: #333333;
    opacity: 1;
    margin: 35px 40px 27px 20px;
  }

  .Method {
    margin-right: 25px;
    width: 180px !important;
    height: 40px;
    background: #ffffff;
    border: 1px solid #dddddd;
    opacity: 1;
    border-radius: 4px;
    display: flex;
    margin-top: 15px;
    position: relative;

    .wx {
      width: 27px;
      height: 24px;
      margin: 8px 0 8px 40px;

      img {
        width: 27px;
        height: 24px;
      }
    }

    .zf {
      margin-left: 5px;
      margin-top: 10px;
    }

    .wx-1 {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 20px;
      height: 20px;

      img {
        width: 0;
        height: 1;
      }
    }
  }

  .checked1 {
    background: #fefaf2;
    border: 1px solid #f5d3a3;

    .wx-1 {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 20px !important;
      height: 20px !important;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .Deduction {
    margin-left: 20px;
    margin-top: 30px;
    display: flex;
    height: 45px;
    width: 1140px;

    .el-input {
      margin-top: 10px;
      width: 250px;
      height: 40px;
    }

    .button-1 {
      margin-top: 10px;
      margin-left: 10px;
      width: 80px;
      height: 40px;
      background: #6675ff;
      opacity: 1;
      border-radius: 4px;
    }

    .button-2 {
      margin-left: 10px;
      width: 180px;
      height: 60px;
      background: linear-gradient(
        360deg,
        #6675ff 0%,
        #8995ff 51%,
        #6675ff 100%
      );
      opacity: 1;
      border-radius: 4px;

      span {
        width: 88px;
        height: 22px;
        font-size: 22px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        line-height: 0px;
        color: #ffffff;
        opacity: 1;
        // margin-left:60px
      }
    }

    .successful {
      width: 80px;
      margin-top: 28px;
      margin-left: 25px;
      margin-right: 85px;
      width: 171px;
      height: 16px;
      font-size: 16px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      line-height: 0px;
      color: #333333;
      opacity: 1;
    }

    .yj {
      margin-top: 28px;
      width: 115px;
      // margin-right:20px;
      height: 16px;
      font-size: 16px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      line-height: 0px;
      color: #acacac;
      opacity: 1;
      text-decoration: line-through;
    }

    .successful-1 {
      width: 50px;
      margin-top: 28px;
      margin-left: 200px;
      font-size: 16px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      line-height: 0px;
      color: #333333;
      opacity: 1;
    }

    .successful-2 {
      width: 100px;
      margin-top: 28px;
      margin-left: 0;
      font-size: 24px;

      font-family: Source Han Sans CN;
      font-weight: 400;
      line-height: 0px;
      color: #d92f2f;
      opacity: 1;
    }
  }

  // .memberships-bottom {
  //   display: flex;
  //   justify-content: space-between;
  //   padding-top: 25px;
  //   width: 1080px;
  //   height: 20px;
  //   margin: 0 auto;
  // }

  .el-radio__inner {
    border-radius: 2px !important;
  }

  .el-radio__input.is-checked .el-radio__inner::after {
    content: "";
    width: 8px;
    height: 3px;
    border: 1px solid white;
    border-top: transparent;
    border-right: transparent;
    text-align: center;
    display: block;
    position: absolute;
    top: 3px;
    left: 2px;
    transform: rotate(-45deg);
    border-radius: 0px;
    background: none;
  }

  .bottom-1 {
    margin-top: 17px;
    width: 256px;
    height: 16px;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 0px;
    color: #d92f2f;
    opacity: 1;
  }

  .el-radio__label {
    display: flex;
  }

  .container .tabs {
    width: 1200px;
    height: 56px;
    padding: 0 40px;
    margin: 10px auto;
    background-color: #fff;
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    z-index: 1000;
    // margin-bottom: 10px;
  }

  .el-tabs__nav-wrap::after {
    height: 0px;
  }

  // :deep(){
  .el-textarea__inner {
    width: 93%;
    height: 80px;
  }

  .tiaozhuan .el-tabs {
    .el-tabs__active-bar {
      background-color: #6675ff;
    }

    .is-active {
      font-size: 16px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      line-height: 20px;
      color: #6675ff;
      opacity: 1;

      a {
        color: #6675ff;
      }
    }

    .el-tabs__nav-wrap::after {
      height: 0px;
    }

    .el-tabs__content {
      display: none;
    }

    .el-tabs__header {
      height: 56px;
    }

    .el-tabs__nav-scroll {
      height: 56px !important;
    }

    .el-tabs__item {
      height: 56px;
      font-size: 16px !important;
    }

    .el-tabs__nav-scroll::after {
      height: 0 !important;
    }
  }

  // }

  .progress {
    width: 1200px;
    margin: 0 auto;
    background-color: #fff;
    height: 252px;
    overflow-x: scroll;
    overflow-y: hidden;
  }

  .schedule {
    width: 1200px;
    margin: 0 auto;
    background-color: #fff;
    // height: 252px;
    overflow-x: scroll;
    overflow-y: hidden;
  }

  .Processing {
    width: 80px !important;
    height: 60px;
    background: #6675ff;
    opacity: 1;
    border-radius: 8px;
    margin-top: 68px;
    margin-left: 40px;
    padding-right: 60px;
  }

  // .scroll-container {
  // width: 100%;
  // white-space: nowrap;
  // overflow-x: scroll;
  // }
  .progress-1 {
    display: flex;
    // width: 1200px;
    // height:100px;
    // white-space: nowrap;
    // overflow-x: auto;
  }

  .jiahao {
    width: 22px;
    height: 22px;
    margin-left: 30px;
    margin-top: 10px;

    // margin-top: 10px;
    img {
      width: 100%;
      height: 100%;
    }
  }

  .xj {
    width: 80px;
    height: 14px;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 20px;
    color: #ffffff;
    opacity: 1;
    text-align: center;
  }

  .cgulList {
    width: 208px;
    height: 156px;
    background: #ffffff;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    opacity: 1;
    border-radius: 8px;
    padding: 10px;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 20px;
    margin-top: 20px;
  }

  .progress-1 {
  }

  .cgulList-time {
    height: 12px;
    font-size: 12px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 20px;
    color: #a9b1be;
    opacity: 1;
    margin-top: 11px;
  }

  .type {
    width: 66px;
    height: 24px;
    background: #eeeeee;
    opacity: 1;
    border-radius: 4px;
    margin-top: 11px;
    text-align: center;
    line-height: 24px;
  }

  .beizhu {
    width: 168px;
    height: 32px;
    font-size: 12px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 20px;
    color: #a9b1be;
    opacity: 1;
    margin-top: 10px;
    background-color: #f8f8f8;
  }

  .jiaocha {
    width: 22px;
    height: 24px;
    margin: 86px 14px 0 14px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .zhuangtai {
    width: 70px;
    height: 20px;
    background-color: #f6f6f6;
    border-radius: 20px;
    line-height: 20px;
    text-align: center;
    margin-left: 20px;
  }

  .checked2 {
    width: 70px;
    height: 20px;
    background-color: #f2a52b;
    border-radius: 20px;
    line-height: 20px;
    text-align: center;
    margin-left: 20px;
  }

  // :deep(){

  // }

  .dialog-footer {
    margin-top: -250px;
  }

  .ywlj {
    width: 154px;
    height: 14px;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    line-height: 20px;
    color: #6675ff;
    text-decoration: underline;
    opacity: 1;
    margin-right: 10px;
    // margin:0 20px 40px;
    // padding-top: -10px;
    cursor: pointer;
    // position: absolute;
    // bottom:20px ;
    // left: 40px;
  }

  .scrollable {
    width: 300px;
    /* 设定 div 的宽度 */
    height: 200px;
    /* 设定 div 的高度 */
    overflow-x: scroll;
    /* 添加水平滚动条 */
  }

  .suppliers {
    width: 1200px;
    margin: 0 auto;
    background-color: #fff;
    position: relative;
  }

  .qian {
    width: 370px;
    height: 100px;
    background: #ffffff;
    border: 1px solid #dddddd;
    opacity: 1;
    border-radius: 8px;
    position: relative;
    // display:flex;
  }

  .qian-s {
    width: 100%;
    height: 20px;
    text-align: center;
    display: flex;
    justify-content: center;
    margin-top: 30px;
    // margin: 0 auto;
    // margin:30px 60px 30px 60px
  }

  .qian-1 {
    // width: 10px;
    // height: 24px;
    font-size: 20px;
    font-family: DIN Alternate;
    font-weight: bold;
    line-height: 20px;
    color: #ff4848;
    opacity: 1;
  }

  .qian-2 {
    // width: 49px;
    // height: 40px;
    font-size: 34px;
    font-family: DIN Alternate;
    font-weight: bold;
    line-height: 20px;
    color: #ff4848;
    opacity: 1;
  }

  .qian-3 {
    // width: 61px;
    // height: 17px;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 20px;
    color: #a9b1be;
    opacity: 1;
  }

  .qian-ss {
    height: 14px;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    // line-height: 61px;
    color: #fe8d03;
    opacity: 1;
    text-align: center;
    margin-top: 10px;
  }

  .radio-content {
    width: 100%;
  }

  .content-left {
    width: 500px;
    margin-right: 20px;
  }

  .content-1 {
    // width: 500px;/
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    // margin-top: 20px;
  }

  .content-right {
    width: 240px;
    height: 210px;
    background: #ffffff;
    border: 1px solid #eeeeee;
    opacity: 1;
    border-radius: 8px;
  }

  a {
    color: #a9b1be;
  }

  a:hover {
    color: #6675ff;
  }

  .tiaozhuan .el-tabs__item a {
    height: 56px;
    width: 100%;
    line-height: 56px;
  }

  .bgimg {
    width: 100%;
    height: 135px;
    position: absolute;
    top: 0;
    background: url("../../assets/img/蒙版组\ 376@2x.png");
    background-repeat: no-repeat;
    /* 不重复 */
    background-position: center center;
    /* 居中 */
    background-size: cover;
  }

  .bgbuttom {
    position: absolute;
    top: 0;
  }

  .prompt {
    margin-top: 20px;
    width: 760px;
    height: 34px;
    background: #ffffff;
    border: 1px solid #eeeeee;
    opacity: 1;
    border-radius: 4px;
    display: flex;
    margin-bottom: 30px;
  }

  .prompt-1 {
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 34px;
    color: #a9b1be;
    display: flex;
    margin-left: 20px;

    .agreement {
      color: #6675ff;
    }
  }

  .purchase {
    width: 180px;
    height: 60px;
    // background: linear-gradient(360deg, #6675ff 0%, #8995ff 51%, #6675ff 100%);
    background: linear-gradient(360deg, #f43107 0%, #f28e79 51%, #f43107 100%);
    opacity: 1;
    border-radius: 4px;
    margin: 0 auto;
    color: #ffffff;
    font-size: 22px;
    text-align: center;
    line-height: 60px;
  }

  .fwb1 {
    min-height: 790px;
  }
}

.carousel-box {
  // width: 360px !important;
  min-width: 360px !important;
  max-width: 360px !important;
  height: 124px;
  background: #ffffff;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  border-radius: 100px;
  display: inline-block;
  margin-top: 20px;
  margin-left: 50px;
  position: relative;
  padding: 20px 0;
}

.carousel {
  width: 1200px;
  height: 164px;
  // padding: 0 50px;
  display: flex;
}

.imgss {
  position: absolute;
  right: -40px;
  top: 50px;
  width: 26px;
  height: 20px;

  // margin: 0 20px;
  img {
    width: 100%;
    height: 100%;
  }
}

.lastOne {
  position: absolute;
  right: -45px;
  width: 26px;
  height: 20px;

  img {
    width: 0%;
    height: 0%;
  }
}

.carousel-time {
  // width: 72px;
  height: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 14px;
  color: #a9b1be;
  line-height: 20px;
  text-align: center;
  margin: 10px 0;
}

.carousel-tit {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* 设置最大显示行数 */
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  text-align: center;
}

.carousel-infoid {
  height: 16px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  font-size: 16px;
  color: #6675ff;
  line-height: 20px;
  text-align: center;
}

// :deep(){
// .el-carousel--horizontal {
//   width: 1200px !important;
//   height: 164px !important;
// }
// .el-carousel__container{
//   width: 1200px !important;
//   height: 164px !important;
// }
// }
#ddd {
  position: absolute;
  bottom: 0px;
  height: 60px;
  width: 1px;
  // z-index: 0;
  // margin-top: -40px;
}

::-webkit-scrollbar-thumb {
  background-color: #999;
  /* 设置滑块的背景颜色 */
}

::-webkit-scrollbar-thumb:hover {
  background-color: #666;
  /* 设置滑块的背景颜色 */
}

.showAll_dialog {
  height: 650px !important;
}

.showAll_dialog .el-dialog__header {
  display: none;
}

.quxiao {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 20px;
  height: 20px;
  color: #000;
}

.kfimg {
  width: 200px;
  height: 200px;

  img {
    width: 100%;
    height: 100%;
    margin-left: 270px;
    // margin-top: 100px;
  }
}

.kf-2 {
  // width: 96px;
  height: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 16px;
  color: #713202;
  text-align: center;
  margin-top: 20px;
  // line-height: 61px;
}
</style>
